<template>
    <div class="content">
		<h2 class="h2">选择发布类别</h2>
		<ul class="onef">
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_03.png" alt="">
				</div>
				<span id="add1">西餐</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_05.png" alt="">
				</div>
				<span id="add1">中餐</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_07.png" alt="">
				</div>
				<span id="add1">日韩料理</span>
			</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_12.png" alt="">
				</div>
				<span id="add1">川湘菜</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_13.png" alt="">
				</div>
				<span id="add1">鲁菜</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_15.png" alt="">
				</div>
				<span id="add1">海鲜</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_20.png" alt="">
				</div>
				<span id="add1">肉类</span>
				</a>
			</li>
			<li class="lefte lefte_color">
				<a href="HostHunt" style="color: #fff;">
				<div class="lefte_img ">
					<img src="@/assets/img/发布/发布_21.png" alt="">
				</div>
				<span id="add1">特色菜</span>
				</a>	
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_22.png" alt="">
				</div>
				<span id="add1">甜品</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_26.png" alt="">
				</div>
				<span id="add1">小吃</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_27.png" alt="">
				</div>
				<span id="add1">食疗食补</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_28.png" alt="">
				</div>
				<span id="add1">其他美食</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_03.png" alt="">
				</div>
				<span id="add1">西餐</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_05.png" alt="">
				</div>
				<span id="add1">西餐</span>
				</a>
			</li>
			<li class="lefte">
				<a href="HostHunt">
				<div class="lefte_img">
					<img src="@/assets/img/发布/发布_07.png" alt="">
				</div>
				<span id="add1">西餐</span>
				</a>
			</li>
		</ul>
</div>
</template>
<script>
export default {
    name:'HostRelease'
}
</script>
<style lang="">
    *{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #000;
}
li{
	list-style-type: none;
}
body{
	/* min-width: 200px; */
	/* max-width: 500px; */
	font-family:'Roboto',Roboto Lt;
}
.content{	
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items:flex-start;
	align-content:space-around;
	padding: 0;
	margin: 0;
	/* background-color: aqua; */
}
.content .h2{
	flex-grow:1;
	font-weight: 700;
	font-size: 1rem;
	/* background: blueviolet; */
	letter-spacing: 3px;
	padding-bottom: 3%;
	padding-top: 2%;
	padding-left: 10%;
}
.content .onef{
	flex-grow:3;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 3%;
	width: 90%;
	padding-bottom: 20%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	/* background-color: bisque; */
}
.content .onef .lefte{
	display: block;
	border-radius: 50%;	
	width: 3.69rem;
    height: 3.69rem;
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 5%;
	text-align: center;
	/* margin-left: 3%; */
	background-color: #f5f5f5;
	
	/* background-color: teal; */
}
.content .onef .lefte_color{
	background-color: #2cd2b9;
	color: #fff;
}
.content .onef .lefte_img{
	/* margin-top: 30%;
	margin-bottom: -15%; */
	width: 100%;
	text-align: center;
    height:2rem;
	line-height: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:flex-end;
    padding-top: 4%;
}
 .content .onef .lefte_img img{
	 width: 1.5rem;
	/* padding-top: 2rem; */
}
/* .lefte:nth-child(1),
.lefte:nth-child(4),
.lefte:nth-child(7),
.lefte:nth-child(10){ */
	
 /* .content .onef .lefte:nth-child(3n+1){ 
	margin-left: 0;

} */


 .content .onef .lefte span{
	letter-spacing: 3px;
	display: inline-block;
	width: 100%;
	padding-top: 8%;
	font-size: 0.5rem;
	text-align: center;
}
.footer{
	flex-grow:1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-top:1%;
	box-shadow: 0 -5px 5px #ff6700;
	width: 100%;
	position: fixed;
	bottom: 0;
	
	background-color: #fff;
}
@media only screen and (min-width: 540px) and (max-width: 740px){
	.content .h2{
		font-size: 1.5rem;
	}
	.content .onef .lefte{
		width: 3.69rem;
		height: 3.69rem;
	}
	.content .onef .lefte_img img{
		
		width: 1.8rem;
		height: 1.8rem;
	}
	.lefte span{
		letter-spacing: 2px;
		font-size: 0.8rem;
	}
	.menu p{
		
	}
	.menu_div img{
		width: 2rem;
		height: 2rem;
	}
}
/* @media only screen and (min-width: 767px) and (max-width: 1024px) {
	.content .h2{
		font-size: 1.5rem;
	}
	.content .onef .lefte {
		width: 7rem;
		margin-left: 1rem;
		margin-right: 1rem;
		height: 7rem;
	}
	
	.lefte img{
		
		width: 2rem;
		height: 2rem;
	}
	.lefte span{
		letter-spacing: 2px;
		font-size: 0.5rem;
	}
	.menu p{
		
	}
	.menu_div img{
		width: 2rem;
		height: 2rem;
	}
} */
/** iPhone **/
/* @media only screen and (min-width: 530px) and (max-width: 767px) {
	.content .onef .lefte{
		width: 2.58rem;
		height: 2.46rem;
	}
} */

</style>